<template>
	<view v-if="isLoading" class="loading-box" >
	  <image class="loading-image" src='@/static/image/loading.gif'></image>
	</view>
	
	<view v-else class="animation-slide-bottom" :style="{animationDelay: aniDelay +'s'}">
		<slot >
	
		</slot>
	</view>
	
	
</template>

<script setup>
	import { ref } from 'vue'
	const props = defineProps(['aniDelay'])
	let isLoading = ref(true)
	
	function show(delay = null){
		return delay ? setTimeout(show, delay) : isLoading.value  = true;
	}
	
	
	function hide(delay = null){
			return delay ? setTimeout(hide, delay) : isLoading.value = false;
		}
	 defineExpose({ show,hide })
</script>

<style>
	.loading-box{
	    display: grid;
		place-items: center;
		height:100vh;
	}
	
	.loading-box .loading-image{
		width: 250rpx;
		height: 250rpx;
		position: relative;
		top: -175rpx;
	}
	
</style>